<template>
  <div class="tablePagination">
    <el-row>
      <el-col :span="12">
        <select
          ref="selectDom"
          class="rcp-page-select"
          @change="select"
        >
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="30">30</option>
          <option value="40">40</option>
          <option value="50">50</option>
          <option value="60">60</option>
          <option value="80">80</option>
          <option value="100">100</option>
        </select>
        <span class="rcp-page-info">共{{ pageNum }}页，{{ pageLimit.totalCount }}条记录</span>
      </el-col>
      <el-col :span="12" class="right">
        <span class="rcp-page-arrow" @click.prevent="pageLimit.pageIndex = 1">׀&lt;</span>
        <span class="rcp-page-arrow" @click.prevent="pageLimit.pageIndex--">&lt;</span>
        <input
          v-model="pageLimit.pageIndex"
          type="text"
          class="rcp-page-goto"
        />
        <span class="rcp-page-arrow" @click.prevent="pageLimit.pageIndex++">&gt;</span>
        <span class="rcp-page-arrow" @click.prevent="pageLimit.pageIndex = pageNum">&gt;׀</span>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { computed, inject, ref, watch } from "vue";

const emit = defineEmits(['queryUnitList']);

const pageLimit = inject('pageLimit');

const selectDom = ref();

const select = () => {
  const dom = selectDom.value;
  pageLimit.pageRow = Number(dom.value);
  pageLimit.pageIndex = 1;
  emit('queryUnitList');
}

// 页的数量
const pageNum = computed(() => Math.ceil(pageLimit.totalCount / pageLimit.pageRow));

// 页码
watch(() => pageLimit.pageIndex, (cur) => {
  if (cur < 1) return pageLimit.pageIndex = 1;
  pageLimit.pageIndex = Math.min(pageNum.value, cur);
  emit('queryUnitList');
})

</script>

<style lang="scss">
.tablePagination {
  width: 100%;
  font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
  * {
    // box-sizing: border-box;
    outline: none;
  }
  .right {
    display: flex;
    justify-content: flex-end;
  }
  .rcp-page-arrow {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    font-family: rcp-font;
    font-size: 16px;
    border: solid 1px #999;
    vertical-align: middle;
    line-height: 24px;
    height: 24px;
    width: 26px;
    color: #ccc;
    user-select: none;
    margin-right: -1px;
  }
  .rcp-page-goto {
    box-sizing: border-box;
    display: inline-block;
    border: solid 1px #999;
    margin: auto 5px;
    width: 4em;
    text-align: center;
    vertical-align: middle;
    height: 26px;
    line-height: 24px;
    color: inherit;
    background: rgba(255, 255, 255, 0.5);
  }
  .rcp-page-select {
    box-sizing: border-box;
    display: inline-block;
    border: solid 1px #999;
    vertical-align: middle;
    height: 26px;
    line-height: 24px;
    color: inherit;
    margin: auto 5px;
  }
  .rcp-page-info {
    display: inline-block;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    line-height: 26px;
    cursor: default;
  }
  .hverCenter {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>